<template>
	<view>
	<view class="rotation">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true" 
		 indicator-active-color="rgb(0, 91, 156)" indicator-color="rgba(0, 0, 0, .7) "
		>
		    <swiper-item class="swiper-item uni-bg-red" v-for="(item,index) in itemDatas.slideshow" 
			:key="index" @click="rotationClick(item)" :id="'btn_'+index"
			>
		        <image  :src="item.vod_pic_slide" />
		    </swiper-item>
		</swiper>
	</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				slideshowData: {}
			}
		},
		props: ['itemDatas'],
		mounted() {
			this.slideshowData = this.Datas
		},
		methods: {
			rotationClick(e){
				//拿到索引值 初始值为0
				// let idx = Number(e.currentTarget.id.substr(4));
				// 索引值发给父级
				this.$emit("rotationClick",e)
			}
		}
	}
</script>

<style scoped>
	.rotation{
		width: 96%;
		height: 150px;
		margin: 0 auto;
	}
	.rotation swiper-item{
		display: block;
		width: 100%;
		height: 150px;
		mrgin:0 auto;
		border-radius: 10rpx;
	}
	.rotation .swiper{
		width: 100%;
		height: 150px;
	}
	.rotation image{
		width: 100%;
		height: 100%;
		margin: 0 10rpx 0 10rpx;
		border-radius: 10rpx;
/* 		background: url('/static/images/loading.gif') no-repeat;
		background-size: 100% 100%; */
		background-color: rgba(0,32,63,1);
	}
	
</style>
